<template>

    <div class="MusicList">
        <div class="musicTop">
            <div class="title">推荐歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="musicContent">
            <van-swipe :loop="false" :width="150" class="my_swipe" :show-indicators="false">

                <van-swipe-item v-for="obj in recommendList " :key="obj.id">
                    <router-link :to="{ path: '/itemMusic', query: { id: obj.id } }">
                        <img :src="obj.picUrl" alt="" class="">
                        <span class="playCount">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <span>{{ changCount(obj.playCount) }}</span>
                        </span>
                        <span class="musicName">{{ obj.name }}</span>
                    </router-link>
                </van-swipe-item>

            </van-swipe>
        </div>
    </div>
</template>

<script>
import { recommendMusicAPI } from '@/api'
export default {

    data() {
        return {
            recommendList: [],
        }
    },
    async created() {

        const res = await recommendMusicAPI({ limit: 10 })
        this.recommendList = res.data.result



    },
    methods: {
        changCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + '万'
            } else {
                return num
            }
        }
    }
}
</script>

<style lang="less" scoped>
.MusicList {
    width: 100%;
    height: 4.5rem;
    padding: 0.2rem;
    margin-bottom: 2rem;

    .musicTop {
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        width: 100%;
        margin-bottom: 0.2rem;

        .title {
            font-size: 0.5rem;
            font-weight: 900;
        }

        .more {
            border: 1px solid #ccc;
            border-radius: 0.4rem;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            font-size: 0.4rem;
            margin-right: 0.5rem;

        }
    }

    .musicContent {
        height: 250px;
        width: 100%;

        .my_swipe {
            height: 100%;

            .van-swipe-item {
                padding: 0 0.2rem;
                position: relative;

                .musicName {
                    font-size: 0.4rem;
                    display: inline-block;
                }

                img {
                    width: 100%;

                    border-radius: 0.6rem;
                }

                .playCount {
                    z-index: 1;
                    position: absolute;
                    color: white;
                    display: flex;
                    height: 1rem;
                    margin-top: -160px;
                    align-items: center;
                    margin-left: 70px;


                    span {
                        font-size: 5px
                    }

                    .icon {
                        width: 0.7em;
                        height: 0.7em;
                        margin-right: 0.1rem;


                    }
                }


            }
        }
    }

}

.song_name {
    font-size: 0.346667rem;
    padding: 0 0.48rem;
    margin-bottom: 0.266667rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
</style>